<script lang="ts" setup>
import { Cascader, Form, Input, InputNumber, Select, Switch } from 'ant-design-vue'
import { objectOmit } from '@vueuse/core'
import {
  type IUICaseStep,
  defaultWithIUICaseStep,
  defaultWithIUIConstantSelectOptions,
  defualtWithIUICase,
} from '../../../types/apis/ui-case'
import { useCustomFetch } from '../../../composables/custom-fetch'
import type { ComponentExposed } from 'vue-component-type-helpers'
import type {
  CascaderProps,
  ShowSearchType,
} from 'ant-design-vue/es/vc-cascader'
import type { IBasic, StepItem } from '../../../types/apis/basic'
import type { ColumnsType } from 'ant-design-vue/es/table'
import type { IOperation } from '../../../types/apis/ui'
import type { AfterFetchContext } from '@vueuse/core/index.cjs'
import {watch, ref, reactive, computed} from 'vue'
import UiDatabaseStep from '~/components/NewOrEdit/UiDatabaseStep.vue'
import UiCaseStep from '~/components/NewOrEdit/UiCaseStep.vue'


const globalConfig = useGlobalConfigStore()

const columns: ColumnsType<any> = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    fixed: 'left',
    align: 'center',
    width: 60,
  },
  {
    title: '排序',
    dataIndex: 'num',
    key: 'num',
    fixed: 'left',
    align: 'center',
    width: 80,
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
    align: 'center',
    width: 150,
  },
  {
    title: '操作类型',
    dataIndex: 'operationType',
    key: 'operationType',
    align: 'center',
    width: 150,
  },
  {
    title: '定位类型',
    dataIndex: 'locationType',
    key: 'locationType',
    align: 'center',
    width: 150,
  },
  {
    title: '定位表达式',
    dataIndex: 'locationExpress',
    key: 'locationExpress',
    align: 'center',
    width: 150,
  },
  {
    title: '元素等待时间',
    dataIndex: 'elementWait',
    key: 'elementWait',
    align: 'center',
    width: 150,
  },

  {
    title: '值',
    dataIndex: 'value',
    key: 'value',
    align: 'center',
    width: 200,
  },
  {
    title: '预期键',
    dataIndex: 'expectKey',
    key: 'expectKey',
    align: 'center',
    width: 120,
  },
  {
    title: '预期值',
    dataIndex: 'expectValue',
    key: 'expectValue',
    align: 'center',
    width: 120,
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    align: 'center',
    width: 150,
  },
  {
    title: '失败是否继续',
    dataIndex: 'isContinue',
    key: 'isContinue',
    align: 'center',
    width: 150,
  },
  {
    title: '是否截图',
    dataIndex: 'isScreenshot',
    key: 'isScreenshot',
    align: 'center',
    width: 100,
  },
  {
    title: '目标定位类型',
    dataIndex: 'targetLocationType',
    key: 'targetLocationType',
    align: 'center',
    width: 140,
  },
  {
    title: '目标定位表达式',
    dataIndex: 'targetLocationExpress',
    key: 'targetLocationExpress',
    align: 'center',
    width: 140,
  },
  {
    title: '目标元素等待时间',
    dataIndex: 'targetElementWait',
    key: 'targetElementWait',
    align: 'center',
    width: 140,
  },
  {
    title: '操作',
    key: 'operation',
    dataIndex: 'operation',
    width: 180,
    fixed: 'right',
    align: 'center',
  },
]

type ResponseType = Record<
  | 'ui_location_type'
  | 'browser'
  | 'mouse'
  | 'keyboard'
  | 'wait'
  | 'assertion'
  | 'browser_type'
  | 'img',
  IOperation[]
>

const { data } = useCustomFetch<ResponseType>(
  '/engine-service/api/v1/dict/list?category=ui_location_type,browser,mouse,keyboard,wait,assertion,img,browser_type,combination, select, iframe',
  {
    initialData: {},
    afterFetch(ctx: AfterFetchContext<IBasic<ResponseType>>) {
      if (ctx.data && ctx.data.code === 0) {
        return {
          data: ctx.data.data,
          response: ctx.response,
        }
      }
      return {
        data: [],
        response: ctx.response,
      }
    },
  },
)

// const currentSelectedOptions = ref<string[]>([])

// const filter: ShowSearchType['filter'] = (inputValue, path) => {
//   return path.some((option) =>
//     option.label.toLowerCase().includes(inputValue.toLowerCase()),
//   )
// }
// const cascaderOptions = computed(() => {
//   if (!data.value) {
//     return []
//   }

//   return Object.entries(
//     objectOmit(data.value, ['ui_location_type', 'browser_type']),
//   )
//     .filter(([, value]) => value.length > 0)
//     .map(([key, value]) => ({
//       value: key,
//       label: value?.[0]?.categoryName ?? '',
//       children: value.map((item) => ({
//         value: item.value,
//         label: item.name,
//       })),
//     })) as CascaderProps['options']
// })

// const currentSelectedValue = computed(() => {
//   const category = data.value?.[currentSelectedOptions.value?.[0] as keyof ResponseType]
//   if (!category) {
//     return []
//   }
//   const selected = category.find(
//     (item) => item.value === currentSelectedOptions.value?.[1],
//   )
//   return selected
//     ? objectDeserializer<{ name: string; field: string }>(selected.extend, true)
//     : []
// })




// watch(() => globalConfig.selectedStep,
//   (newValue) => {
//     initOperationType(newValue.operationType)
//   },
//   { deep: true }
// )

// function initOperationType(type: string | undefined) {

//   if (!type) return
  
//   const found = cascaderOptions.value?.find(
//     (item) => item.children?.find((child) => child.value === type) != null,
//   )

//   if (!found) return

//   currentSelectedOptions.value = [
//     found.value as string,
//     found.children!.find((child) => child.value === type)!.value as string,
//   ]

// }


/**
 * 重试开关变动
 */
// let isRetrySwitchType = ref(!globalConfig.selectedStep.isRetry);
// watch(() => globalConfig.selectedStep.isRetry,
//   (newValue) => {
//     if(newValue){
//       isRetrySwitchType.value = false
//     }else{
//       isRetrySwitchType.value = true
//     }
//   },
//   { deep: true }
// )

</script>

<template>
  <NewOrEditSteps
    info="ui"
    localized-name="UI 用例"
    base-api-name="ui_case"
    :columns="columns"
    :default-with-step-item="defaultWithIUICaseStep"
    :default-with-step-instance="defualtWithIUICase"
    :default-constant-select-options="defaultWithIUIConstantSelectOptions"
  >
    <template #body-content="{ formModel }">
      <Form
        :modal="formModel"
        layout="horizontal"
        class="grid grid-cols-4 gap-4"
      >
        <Form.Item label="名称">
          <Input v-model:value="formModel.name" placeholder="请输入名称" />
        </Form.Item>

        <Form.Item label="浏览器">
          <Select v-model:value="formModel.browser">
            <Select.Option
              v-for="item in data?.browser_type"
              :key="item.id"
              :value="item.value"
            >
              {{ item.name }}
            </Select.Option>
          </Select>
        </Form.Item>

        <FormItemModules v-model:module-id="formModel.moduleId" />

        <FormItemLevel v-model:level="formModel.level" />

        <Form.Item label="描述">
          <Input.TextArea
            v-model:value="formModel.description"
            placeholder="请输入描述"
          />
        </Form.Item>

        <Form.Item label="循环次数">
          <Input v-model:value="formModel.cyclesNum" placeholder="请输入次数" />
        </Form.Item>

        <Form.Item label="模式选择">
            <Select v-model:value="formModel.headArguments" default-value="HEAD">
              <Select.Option value="HEAD">浏览器模式</Select.Option>
              <Select.Option value="HEADLESS">无头模式</Select.Option>
            </Select>
          </Form.Item>

          <FormItemBeforeCase v-model:before-case-ids="formModel.beforeCaseIds" />

      </Form>

     
    </template>

    <template v-if="globalConfig.testType === 'UI'"  #model-content="{ selectedStep, setStepSlotRef, constantSelectOptions }">
      <UiCaseStep :ref="
          (el) => setStepSlotRef(el as ComponentExposed<typeof UiCaseStep>)
        "
        :data="data"
        :api-constant-select-options="constantSelectOptions"
        :database-constant-select-options = "constantSelectOptions"
        :selected-step="selectedStep as IUICaseStep" />
    </template>

    <template v-if="globalConfig.testType === 'DATABASE'"  #model-content="{ selectedStep, setStepSlotRef, constantSelectOptions }">
      <UiDatabaseStep
        :ref="
          (el) => setStepSlotRef(el as ComponentExposed<typeof UiDatabaseStep>)
        "
        :api-constant-select-options="constantSelectOptions"
        :database-constant-select-options = "constantSelectOptions"
        :selected-step="selectedStep as IUICaseStep"
      />
    </template>
  </NewOrEditSteps>
</template>
